<template>
    <div>
        <div class="search-feature relative">
            <div class="search-input relative">
                <input type="search" :class="{input: isINPUT}" :placeholder="isINPUT ? '请输入手机号' :'搜索'" @focus="input" v-model="searchNum" @keydown.enter="search(searchNum)">
                <span class="icon icon-search" v-show="!isINPUT"><img src="../../assets/image/search-btn@1x.png" alt=""></span>
                <span class="btn search-cancle" v-show="isINPUT" @click="searchReturn">取消</span>
            </div>
            <div class="search-history" v-show="isINPUT && !isSearch">
                <div class="search-history-title bt bb"><span class="icon"><img src="../../assets/image/B601051F-90D0-4D31-AFA4-840C725EDB4B@1x.png" alt=""></span>历史搜索</div>
                <div class="search-history-list">
                    <div class="search-history-item bb" v-for="(history, index) in listSearchHistory">
                        <div class="history-number" @click="search(history.phoneNumber)">{{history.phoneNumber}}</div>
                        <span class="search-history-delete tc fr" @click="deleteHistory(index)">
                            <img src="../../assets/image/6D0C1BA8-1D41-4EF3-88B9-1D67DD7EAD2D@1x.png" alt="">
                        </span>
                    </div>
                </div>
            </div>
            <div class="search-failed" v-show="isINPUT">{{searchFailed}}</div>
        </div>
        <client-feature v-show="!isINPUT"></client-feature>
        <task-feature v-show="!isINPUT"></task-feature>
    </div>
</template>

<script type="text/ecmascript-6">
//import SearchFeature from './searchFeature.vue';
import ClientFeature from './clientFeature.vue';
import TaskFeature from './taskFeature.vue';

export default{
    data(){
        return {
            isINPUT: false,//输入状态,隐藏门店信息,任务信息,搜索图标,  打开搜索历史,取消按钮
            isSearch: false,//确定搜索时隐藏搜索历史
            homesUserId: 1111111,//车享家门店用户ID
            listSearchHistory: [],//历史记录
            searchNum: '',//搜索框输入内容
            searchResult: {},//搜索结果
            searchFailed: '', //搜索失败显示内容
        };
    },
    components: {
//        SearchFeature,
        ClientFeature,
        TaskFeature
    },
    created(){
        this.$http.get('/mobile/userSearch/listSearchHistory?homesUserId=' + this.homesUserId + '&size=5').then(function (res) {
            res = res.body;
            if(res.code == 0){
                res = res.result;
                this.listSearchHistory = res;
            }else {
                console.warn(res.code);
            }
        }, function (err) {
            console.warn('错误码'+ err.status);
        });
    },
    methods: {
        input(){
            this.isINPUT = true;
        },
        deleteHistory(id){
            this.listSearchHistory.splice(id, 1);
            this.$http.post('/mobile/userSearch/deleteSearchHistory', {"id": id}).then(function (res) {
                res = res.body;
                if(res.code == 0){
                    res = res.result;
                    console.log(res);
                }else {
                    console.warn(res.code);
                }
            }, function (err) {
                console.warn('错误码'+ err.status);
            });
            console.log(id)
        },
        searchReturn(){
            this.searchNum = '';
            this.isINPUT = false;
            this.isSearch = false;
        },
        search(searchNum){
            this.isSearch = true;
            this.$http.get('/mobile/userSearch/getUserId?phoneNumber=' + this.searchNum).then(function (res) {
                res = res.body;
                if(res.code == 0){
                    res = res.result;
                    this.searchResult = res;
                    console.log(res.phoneNumber);
                    window.location.href = './clientDetails.html#' + res.userId;
                }else {
                    console.warn(res.code);
                    this.searchFailed = res.message;
                }
            }, function (err) {
                console.warn('错误码'+ err.status);
            });
        }
    }
}
</script>

<style lang="scss">
    @import "../../assets/css/common.scss";
    .search-feature{
        .search-input{
            margin: rem(8) rem(12);
            input{
                background:#a68f88;
                border-radius: rem(5);
                height: rem(28);
                width: 100%;
                padding: rem(6) rem(6) rem(6) rem(30);
                margin: rem(1);
                font-size: rem(14);
                color: #fff;
                border-width: rem(1);
            }
            .input{
                background:#a68f88;
                border-radius: rem(5);
                height: rem(28);
                width: rem(265);
                padding: rem(6) rem(6) rem(6) rem(6);
                font-size: rem(14);
                color: #fff;
            }
            span{
                display: block;
                position: absolute;
                left: rem(5);
                top: rem(5);
                width: rem(20);
                height: rem(15);
                text-align: center;
                padding-top: rem(3);
            }
            .search-cancle{
                padding: rem(5);
                border-radius: rem(2);
                border: rem(1) solid #999;
                background-color: #eee;
                position: absolute;
                left: inherit;
                right: rem(2);
                top: rem(1);
            }
        }
        .search-history{
            font-size: rem(16);
            background-color: #fff;
            .search-history-title{
                padding: rem(12) rem(12);
                color: #ddd0cc;
                span{
                    width: rem(26);
                    height: rem(20);
                    float: left;
                    margin-top: rem(-1);
                }
            }
            .search-history-item{
                padding: rem(12);
                .history-number{
                    display: inline-block;
                }
                .search-history-delete{
                    width: rem(30);
                }
            }
        }
        .search-failed{
            padding: rem(20);
        }
    }
</style>
